<template>
	<view class="my-contant">
		<view class="header" @click="headerClick">
			<view class="img">
				<u--image :src="avatarImg" shape="circle" width="60px" height="60px">
					<view slot="error" style="font-size: 24rpx;">加载失败</view>
				</u--image>
				<view class="name" v-if="userName">{{userName}}</view>
				<view class="name" v-else>点击登录</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right" color="#d6cfcf" size="16"></u-icon>
			</view>
		</view>
		<view class="second-group group">
			<u-cell-group>
				<u-cell iconStyle="color:#32a4e0;padding-right:10px" icon="star-fill" title=" 我关注的活动"
					v-if="roleCode !== 'act_organizer'" @click="actClick"></u-cell>
				<u-cell iconStyle="color:#32a4e0;padding-right:10px" icon="list-dot" title=" 我发布的活动"
					v-if="roleCode === 'super_admin'" @click="myActClick"></u-cell>
				<u-cell iconStyle="color:#32a4e0;padding-right:10px" icon="attach" title=" 我的得分" value=""
					@click="scoreClick"></u-cell>
				<u-cell iconStyle="color:#32a4e0;padding-right:10px" icon="more-circle" title=" 我提交的反馈" value=""
					@click="feedBackClick"></u-cell>
			</u-cell-group>
		</view>
		<view class="third-group group">
			<u-cell-group>
				<u-cell iconStyle="color:#32a4e0;padding-right:10px" icon="scan" title=" 扫一扫"
					@click="scanQrCodeClick"></u-cell>
				<u-cell iconStyle="padding-right:10px" icon="setting-fill" title=" 个人设置" @click="headerClick"></u-cell>
			</u-cell-group>
		</view>
		<view class="forth-group group">
			<u-cell-group>
				<u-cell iconStyle="color:#ff0000;padding-right:10px" icon="play-right" title=" 退出登录"
					@click="logout"></u-cell>
			</u-cell-group>
		</view>
		<login ref="login" @refresh="refresh"></login>
	</view>
</template>

<script>
	import {
		envURL
	} from '@/utils/env.js'
	import {
		removeToken,
		getToken
	} from '@/utils/auth.js'
	import {
		userLogin,
		getUserInfo
	} from '@/config/api.js'
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {},
		data() {
			return {
				userName: '',
				avatarImg: '',
				isLogined: false,
			}
		},
		computed: {
			...mapGetters([
				'name',
				'avatar',
				'roleCode'
			])
		},
		onLoad() {

		},
		methods: {
			...mapActions(['login', 'setInfo', 'logout']),
			// 用户登录
			headerClick() {
				if (this.isLogined) {
					uni.navigateTo({
						url: `/pages/mySetting/mySetting`
					});
				} else {
					this.$refs.login.showFlag = true
				}
			},
			// setInfo
			async setInfoFn() {
				const infoRes = await getUserInfo()
				if (infoRes.code === 90008 || infoRes.code === 90014) {
					this.userName = ''
					this.avatarImg = ''
					this.isLogined = false
				} else {
					this.setInfo(infoRes.data)
					this.userName = infoRes.data.userName
					this.avatarImg = envURL + infoRes.data.avatar
					this.isLogined = true
				}
			},

			async onShow() {
				await this.setInfoFn()
			},

			actClick() {
				if (!this.isLogined) {
					this.$refs.login.showFlag = true
				} else {
					uni.navigateTo({
						url: `/pages/myAttention/myAttention?actType=0`
					});
				}
			},
			myActClick() {
				if (!this.isLogined) {
					this.$refs.login.showFlag = true
				} else {
					uni.navigateTo({
						url: `/pages/myAttention/myAttention?actType=1`
					});
				}
			},

			scoreClick() {
				if (!this.isLogined) {
					this.$refs.login.showFlag = true
				} else {
					uni.navigateTo({
						url: `/pages/myScore/myScore`
					});
				}
			},

			feedBackClick() {
				if (!this.isLogined) {
					this.$refs.login.showFlag = true
				} else {
					uni.navigateTo({
						url: `/pages/myFeedback/myFeedback`
					});
				}
			},

			scanQrCodeClick() {
				if (this.isLogined) {
					// 为扫码签到
					uni.scanCode({
						success: function(res) {
							let resData = JSON.parse(res.result)
							uni.navigateTo({
								url: `${resData.url}?actId=${resData.actId}&signType=0`
							});
						}
					});
				} else {
					this.$refs.login.showFlag = true
				}

			},

			async refresh() {
				await this.setInfoFn()
			},

			async logout() {
				removeToken()
				await this.setInfoFn()
			}
		}
	}
</script>

<style lang="scss">
	.my-contant {
		padding: 0 10px 10px 10px;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 10px;

		.img {
			display: flex;
			align-items: center;

			.name {
				font-weight: 700;
				padding-left: 20px;
			}
		}
	}

	.group {
		margin-top: 10px;
		border-radius: 8px;
		overflow: hidden;
		background-color: #fff;
		box-shadow: 1px 1px 1px 1px #e7e7e7;
	}
</style>